<template>
  <div class="main">
   <el-container>
     <el-aside width='160px'>
       <img :src="url" style="height:100%; width:100%;"></img>
      </el-aside>
     <el-main>
       <div>
         <el-row style="display: flex;align-items: center;">
          <el-col :span='18'><el-link @click="GoOneNotice">{{NoticeTittle}}</el-link></el-col>
          <el-col :span='4' :offset="2">点击量：{{hits}}</el-col>
         </el-row>
        </div>
       <div class='wordexp'>{{AmtContent}}</div>
       <div class='wordexp'>{{date}}</div>
     </el-main>
   </el-container>
  </div>
</template>

<script>
export default {
  name: 'AmtTp',
  props:[
    'ListItem',
  ],
  data () {
    return {
      NoticeTittle: '', // 通知公告名  限制字数 名称不宜太长
      AmtContent: 'xxxxxxxxxxxxxx', // 内容简述
      date: 'xxxx-xx-xx xx:xx', // 发布日期
      hits: '- -', //点击次数
      url:  '',
      source: '- -', // 来源
      keywords: '- -', // 关键词
      NoticeContent: '', // 内容
    }
  },
  created() {
    this.NoticeTittle = this.ListItem.NoticeTittle;
    this.AmtContent = this.ListItem.AmtContent;
    this.date = this.ListItem.date;
    this.hits = this.ListItem.hits;
    this.url = this.ListItem.url;
    this.source = this.ListItem.source;
    this.keywords = this.ListItem.keywords;
    this.NoticeContent = this.ListItem.NoticeContent;
  },
  methods: {
    GoOneNotice(){
      this.$router.push({
        path: 'OneNoticeTp',
        query: {
          NoticeTittle: this.NoticeTittle,
          source: this.source,
          hits: this.hits,
          keywords: this.keywords,
          date: this.date,
          NoticeContent: this.NoticeContent,
        }
      });
    }
  }
}
</script>

<style scoped>
.main{
  padding: 10px;
}
.el-rol{
  display: flex;
  align-items: center;
}
.el-link{
  font-size: 20px;
  color: rgb(10, 121, 185);
  margin-left: 20px;
}
.el-col{
  text-align: left;
}
.el-aside{
  height: 120px;
  overflow: hidden;
}
.wordexp{
  font-size: 18px;
  color: grey;
  margin: 22px 20px;
  display: flex;
}
</style>

